<template>
    <div class="main-container">
        <div class="left-box">
            <MarketOverview></MarketOverview>
            <TopMovers></TopMovers>
        </div>
        <div class="right-box">
            <SearchBox></SearchBox>
            <MenuBox></MenuBox>
            <NewBox></NewBox>
        </div>
    </div>
</template>

<script setup>
import MarketOverview from '@/components/pageunit/index/MarketOverview.vue';
import TopMovers from '@/components/pageunit/index/TopMovers.vue';
import SearchBox from '@/components/pageunit/index/SearchBox.vue';
import MenuBox from '@/components/pageunit/index/MenuBox.vue';
import NewBox from '@/components/pageunit/index/NewBox.vue';
</script>

<style scoped lang="less">
.main-container {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
    padding: 1.5vw 11vw;
    display: flex;
    gap: 2vw;

    .left-box, .right-box {
        display: flex;
        flex-direction: column;
        gap: 2vw;
    }

    .left-box {
        flex: 13;
    }

    .right-box {
        flex: 6;
    }
}
</style>